<template>
	<view :class="[primarySize()]">
		<view class="nav flex-box">
			<view class="flex-grow-1 tc" :class="[navi==0?'active':'']" @click="nav(0)"><text>职位</text></view>
			<view class="flex-grow-1 tc" :class="[navi==1?'active':'']" @click="nav(1)"><text>企业</text></view>
			
		</view>
		<view class="container plr30 pt20">
			<template v-if="navi==0">
				<view class="nothing" v-if="jobComments.length===0">
					<image class="img_nothing" src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFill"></image>
					<text>抱歉，暂无相关信息</text>
				</view>
				<template v-if="jobComments.length>0">
					<navigator :url="comment.job.status==1?'/pages/public/jobs_detail?id='+comment.job_id:''"
						class="appraise_item" v-for="(comment,index) in jobComments">
						<view class="flex-box">
							<view class="header_img">
								<image :src="cdnurl(comment.user.avatar)||'https://admin.mosizp.cn/static/public/avatar.png'"
									mode="aspectFill"></image>
							</view>
							<view class="flex-grow-1">
								<view class="flex-box">
									<view class="m-ellipsis pr30 flex-grow-1">{{comment.user.nickname}}</view>
									<view class="star_img">
										<image :src="'https://admin.mosizp.cn/static/public/star'+(index<comment.avg_score?'-on':'')+'.png'"
											mode="aspectFit" v-for="(item,index) in 5"></image>
									</view>
								</view>
								<view class="fs24 col3">面试职位：{{comment.job.job_name}}<text
										v-if="comment.job.status!=1">（已下线）</text></view>
							</view>
						</view>
						<view class="clearfix ptb20">
							<view class="welfare_item" v-for="(tag,index) in split(',',comment.tags)">
								{{tag}}</view>
						</view>
						<view class="fs26 col3"><text>{{comment.content}}</text></view>
					</navigator>
					<button ontap="fetch" hover-class="none" class="more_btn mt30">{{jobCommentsMore.text}}</button>
				</template>
			</template>

			<template v-if="navi==1">
				<view class="nothing" v-if="companyComments.length===0">
					<image class="img_nothing" src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFill"></image>
					<text>抱歉，暂无相关信息</text>
				</view>
				<template v-if="companyComments.length>0">
					<view class="appraise_item" v-for="(comment,index) in companyComments">
						<view class="flex-box">
							<view class="header_img">
								<image :src="cdnurl(comment.user.avatar)||'https://admin.mosizp.cn/static/public/avatar.png'"
									mode="aspectFill"></image>
							</view>
							<view class="flex-grow-1">
								<view class="flex-box">
									<view class="m-ellipsis pr30 flex-grow-1">{{comment.user.nickname}}</view>
									<view class="star_img">
										<image :src="'https://admin.mosizp.cn/static/public/star'+(index<comment.avg_score?'-on':'')+'.png'"
											mode="aspectFit" v-for="items in 5"></image>
									</view>
								</view>
								<view class="fs24 col3">
									{{comment.enterpriseinfo.full_name||comment.enterpriseinfo.company_name}}</view>
							</view>
						</view>
						<view class="clearfix ptb20">
							<view class="welfare_item" v-for="(tag,index) in split(',',comment.tags)">
								{{tag}}</view>
						</view>
						<view class="fs26 col3"><text>{{comment.content}}</text></view>
					</view>
					<button ontap="fetch" hover-class="none" class="more_btn mt30">{{companyCommentsMore.text}}</button>
				</template>
			</template>

			<template v-if='navi==2'>
				<view class="nothing" v-if="shopComments.length===0">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" class="img_nothing" mode="aspectFit"></image>
					<text>抱歉，暂无相关信息</text>
				</view>
				<template v-if="shopComments.length>0">
					<view class="appraise_item" v-for="(comment,index) in shopComments">
						<view class="flex-box">
							<view class="header_img">
								<image :src="cdnurl(comment.user.avatar)||'https://admin.mosizp.cn/static/public/avatar.png'"
									mode="aspectFill"></image>
							</view>
							<view class="flex-grow-1">
								<view class="flex-box">
									<view class="m-ellipsis pr30 flex-grow-1">{{comment.user.nickname}}</view>
									<view class="star_img">
										<image :src="'https://admin.mosizp.cn/static/public/star'+(index<comment.avg_score?'-on':'')+'.png'"
											mode="aspectFit" v-for="items in 5"></image>
									</view>
								</view>
								<view class="fs24 col3">
									{{comment.enterpriseinfo.full_name||comment.enterpriseinfo.company_name}}</view>
							</view>
						</view>
						<view class="clearfix ptb20">
							<view class="welfare_item" v-for="(tag,index) in split(',',comment.tags)">
								{{tag}}</view>
						</view>
						<view class="fs26 col3"><text>{{comment.content}}</text></view>
					</view>
					<button ontap="fetch" hover-class="none" class="more_btn mt30">{{shopCommentsMore.text}}</button>
				</template>
			</template>

			<view class="eval_main" v-if="navi==3">
				<view class="nothing" v-if="list.length===0">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" class="img_nothing" mode="aspectFit"></image>
					<text>抱歉，暂无相关信息</text>
				</view>
				<view class="eval_item" v-for="(comment,index) in list" :data-type="comment.type"
					:data-post_id="comment.post_id" @click="post_detail">
					<view class="flex-box pt30">
						<view class="header">
							<image :src="comment.post.user.avatar"></image>
						</view>
						<view class="flex-grow-1 m-ellipsis">{{comment.post.user.nickname}}</view>
					</view>
					<view class="fs26 col0 mt15">{{comment.post.content}}</view>
					<view class="flex-box col6 reply_info">
						<!-- <view class="flex-grow-1 fs26">#话题</view> -->
						<view class="fs24">{{comment.date}}</view>
					</view>
					<view class="eval_list">
						<view class="eval_part">
							<view class="eval_name"><text>回复：</text>@{{comment.comment_username}}</view>
							<view class="fs26 col0 pt10">{{comment.comment}}</view>
						</view>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				
				jobComments: null,
				jobCommentsMore: {
					page: 1
				},

				companyComments: null,
				companyCommentsMore: {
					page: 1
				},

				shopComments: null,
				shopCommentsMore: {
					page: 1
				},

				page: 1,
				list: null,

				info: [],


				navi: 0
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {

			this.fetchJobComments();

		},
		methods: {
			nav(index) {
				this.navi = index
				if (this.navi == 1 && this.companyComments === null) {
					this.fetchCompanyComments();
				}
				if (this.navi == 2 && this.shopComments === null) {
					this.fetchShopComments();
				}
				if (this.navi == 3 && this.list === null) {
					this.list=[]
					this.get_discover_comment_list();
				}
			},

			// 获取发现评论列表
			get_discover_comment_list() {
				var that = this;
				var page = that.page;
				var list = that.list;
				this.$core.post({
					url: '/discover/get_discover_comment_list',
					data: {
						page: page
					},
					success(res) {
						if (res.code == 1) {
							for (var i = 0; i < res.data.length; i++) {
								list.push(res.data[i])
							}
							that.list = list
						}
					}
				})
			},
			// 进入详情页
			post_detail(e) {
				var post_id = e.currentTarget.dataset.post_id;
				var type = e.currentTarget.dataset.type;
				uni.navigateTo({
					url: '/pages/public/post_detail?post_id=' + post_id + '&type=' + type
				})
			},
			onReachBottom() {
				var nav = this.navi;
				if (nav == 3) {
					var page = this.page;
					page++;
					this.setData({
						page: page
					})
					this.get_discover_comment_list()
				}
			},

			fetchJobComments() {
				this.$util.fetch(this, 'xilujob.interview_comment/my_comment', {}, 'jobCommentsMore', 'jobComments',
					'data', 'unique');
			},
			fetchCompanyComments() {
				this.$util.fetch(this, 'xilujob.company_comment/my_comment', {}, 'companyCommentsMore', 'companyComments',
					'company_comments', 'unique');
			},
			fetchShopComments() {
				this.$util.fetch(this, 'shop_comment/my_post', {}, 'shopCommentsMore', 'shopComments', 'shop_comments',
					'unique');

			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 58rpx;
		height: 58rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15rpx;
	}

	.header image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.eval_item {
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.06);
		border: 1rpx solid #e1e1e1;
		border-radius: 10rpx;
		margin-bottom: 26rpx
	}

	.star_img {
		line-height: 1
	}

	.star_img image {
		width: 20rpx;
		height: 20rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 8rpx;
	}

	.reply_btn {
		font-size: 24rpx;
		color: var(--primary);
		border: 1rpx solid var(--primary);
		border-radius: 8rpx;
		padding: 0 18rpx;
	}

	.reply_info {
		padding: 39rpx 0;
	}

	.mt15 {
		margin-top: 15rpx;
	}

	.store_img {
		margin-right: 20rpx;
		width: 105rpx;
		height: 78rpx;
		border-radius: 10rpx;
		overflow: hidden
	}

	.store_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.store_info {
		padding: 40rpx 0;
		border-top: 1rpx solid #E1E1E1
	}

	.eval_name {
		font-size: 24rpx;
		color: #666666
	}

	.eval_name text {
		color: var(--primary)
	}

	/* .eval_list{box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);padding: 20rpx 27rpx;box-sizing: border-box;margin-bottom: 40rpx} */
	.eval_list {
		padding: 0 0 20rpx 0rpx;
		box-sizing: border-box;
	}


	.reply_con {
		padding: 10rpx 13rpx;
		box-sizing: border-box;
		background-color: #FAFAFA
	}

	.reply_text {
		background-color: #fff;
		border-radius: 2rpx
	}

	.reply_text input {
		height: 79rpx;
	}

	.pl25 {
		padding-left: 25rpx;
	}

	.header_img {
		width: 72rpx;
		height: 72rpx;
		margin-right: 20rpx;
	}

	.header_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.star_img image {
		width: 29rpx;
		height: 27rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 9rpx;
	}

	.welfare_item {
		font-size: 20rpx;
		color: #999;
		float: left;
		border-radius: 8rpx;
		line-height: 39rpx;
		background-color: #F7F7F7;
		margin-right: 20rpx;
		padding: 0 15rpx;
		box-sizing: border-box
	}

	.ptb20 {
		padding: 20rpx 0;
	}

	.appraise_item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F3F3F3
	}

	.appraise_item:nth-last-child(1) {
		border-bottom: 0
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #fff;
		line-height: 92rpx;
		justify-content: space-between;
		z-index: 20
	}

	.nav view {
		padding: 0 30rpx;
	}

	.nav text {
		display: inline-block;
		position: relative;
		font-size: 28rpx;
	}

	.nav .active text::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		display: block;
		background-color: #FF7100;
		height: 4rpx;
		border-radius: 2rpx;
		bottom: 13rpx;
	}

	.nav~.container {
		padding-top: 120rpx
	}
</style>